<template>
  <div>
    <!-- 测试消息提示组件 -->
    <!-- <XtxMessage type="warn" text="警告" /> -->
    <!-- <XtxMessage type="error" text="错误" /> -->
    <XtxMessage type="success" text="成功" />
    <div class="box"></div>
    <div class="box2"></div>
    <button @click="open">调用消息提示的方法</button>
    <!-- 测试轮询 -->
    <div>
      <h1>{{ count }}</h1>
      <button @click="start">start</button>
      <button @click="pause">stop</button>
    </div>
  </div>
</template>

<script>
import { createVNode, render, onMounted } from 'vue'
// import Message from '@/components/Message'
// 选项setup写法优先导入index.vue => <script setup> 优先导入index.js
import { message } from '@/components/Message/index.js'
// import { useIntervalFn } from '@vueuse/core'
import { useCountDown } from '@/hooks'
console.log(message)
export default {
  setup () {
    /**
     * 了解虚拟DOM（假DOM）的创建和渲染（变成真实DOM）
     * 1. 导入createVNode方法=》创建虚拟DOM
     * 2. 导入render方法=》渲染创建虚拟DOM
     */
    onMounted(() => {
      // 1. 创建html虚拟DOM元素
      const h1 = createVNode('h1', { class: 'red' }, ['我是子元素'])
      console.log('虚拟DOM：', h1)
      render(h1, document.querySelector('.box'))
      // 2. 创建自定义组件.vue的虚拟DOM元素
      // const msg = createVNode(Message, { type: 'success', text: '我是虚拟DOM创建的' })
      // console.log('虚拟DOM：', msg)
      // render(msg, document.querySelector('.box2'))
      // // 渲染之后，调用msg中的变量
      // msg.component.setupState.isShow = true
      // setTimeout(() => {
      //   msg.component.setupState.isShow = false
      // }, 2000)
    })
    const open = () => {
      message({ type: 'success', text: '方法' })
    }

    // 了解useIntervalFn用法
    /**
     * pause 停止
     * resume 开始
     */
    // const count = ref(60)
    // const { pause, resume } = useIntervalFn(() => {
    //   /* your function */
    //   // console.log(count.value)
    //   count.value--
    //   if (count.value <= 0) {
    //     pause()
    //   }
    // }, 1000, { immediate: false })
    const { count, pause, start } = useCountDown(60)
    return { open, count, pause, start }
  }
}
</script>

<style lang="scss" scoped>
</style>
